<template>
	<view class="content" :style="{height:height+1+'px'}">
		<view class="wrap" v-for="item in list" @click="goDetails(item.id)">
			<view class="img-warp">
				<image class="img" :src="item.cover"></image>
			</view>
			<view class="text-wrap">
				<text class="name">{{item.name}}-{{item.managerName}}</text><br/>
				<text class="address">{{item.address}}</text>
			</view>
		</view>
		<button :loading="loading==1" size="mini" class="load-but">
			{{loading==-1?'':loading==1?'正在加载更多':''}}
		</button>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	export default {
		components: {
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				list:[],
				loading:0,
				page:0
			}
		},
		onLoad() {
			this.getData(true)
		},
		onPullDownRefresh(){
			this.getData(true)
		},
		onReachBottom(){
			if([-1,-2].indexOf(this.loading)<0){
				this.getData()
			}
		},
		methods: {
			clikeGetData(){
				if(this.loading==-2){
					this.getData()
				}
			},
			async getData(flag){
				if(flag){
					uni.showLoading()
				}else{
					this.loading=1
				}
				let json = await API.buildingList({
					checkStatus:'success',
					limit:10,
					page:flag?0:this.page,
					sincer:1
					// token: uni.getStorageSync('token')
				});
				if(json.status==200){
					if(flag){
						this.list=json.data
						this.page=0
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						this.page++
						this.list=this.list.concat(json.data)
					}
					if(json.data.length<10){
						this.loading=-1
					}else{
						this.loading=0
					}
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: '刷新失败，请重试',
							showCancel: false,
						});
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						uni.showModal({
							title: '提示',
							content: '加载失败，请重试',
							showCancel: false,
						});
						this.loading=-2
					}
				}
			},
			goDetails(id){
				uni.navigateTo({
					url: '../building/details?id='+id
				});
			}
		}
	}
</script>

<style scoped>
	button:after {
		border-width: 0;
	}
	.content {
	}
	.wrap{
		padding:30upx 0upx 0 34upx;
		display: flex;
	}
	.img-warp{
		width: 104upx;
		height: 104upx;
		margin-right: 34upx;
	}
	.img{
		width: 100%;
		height: 100%;
		border-radius: 200upx;
	}
	.text-wrap{
		width:calc(100% - 124upx);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-bottom: 30upx;
		border-bottom: 1px solid #e9e9e9;
	}
	.name{
		color: rgba(0, 0, 0, 1);
		font-size: 34upx;
		font-family: PingFangSC-regular;
		overflow: hidden;
		line-height: 60upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #222222;
	}
	.address{
		color: #808080;
		font-size: 28upx;
		line-height: 50upx;
		font-family: PingFangSC-regular;
	}
	.load-but{
		width: 100%;
		border:0px solid white;
		background: white;
	}
</style>
